<template>
  <div class="list-wrapper">
    <div class="item-wrapper">
      <div class="list-type">
        <span @click="selectType">{{currentTypeName}}<i class="el-icon-arrow-down"></i></span>
      </div>
      <ex-infinite-scroll ref="ins" class="data-list" url="pde/scores/getTask" :size="20">
        <template slot="content" slot-scope="{list}">
          <div class="item" v-for="item in list" :key="item.id" @click="openScoreDetail(item)">
            <div class="row-1">
              {{item.projectName}}
            </div>
            <div class="row-2">
              {{item.evItemName}}
            </div>
            <div class="row-3">
              考核分数：{{item.scores ? item.scores: '未评分'}}
            </div>
          </div>
        </template>
        <template slot="footer" slot-scope="{noMore}">
          <div class="footer">
            {{noMore ? '没有更多信息了': '加载更多信息'}}
          </div>
        </template>
      </ex-infinite-scroll>
    </div>
    <Tab currentTab="assess"/>
  </div>
</template>

<script>
import ExInfiniteScroll from '@/components/common/ex-infinite-scroll'
import Tab from './component/Tab'
import dingMixin from  '@/mixins/ding'

export default {
  data() {
    return {
     currentTypeName: '未评分',
     departments: [],
     hasDone: false
    }
  },
  components: {
    Tab,ExInfiniteScroll
  },
  mixins: [dingMixin],
  async mounted() {
    this.hasDone = window.SCORETYPE || false;
    this.currentTypeName = this.hasDone ? '已评分': '未评分';
    this.getData();
    window.SCORETYPE = false;
  },
  methods: {
    selectType() {
      this.mobileChosen([{key: '未评分',value: false}, {key: '已评分', value: true}], this.currentType,(data) => {
        this.currentTypeName = data.key;
        this.hasDone = data.value;
        this.getData();
      })
    },
    getData() {
      this.$refs.ins.getData({
        hasDone: this.hasDone,
        dingId: this.userInfo.dingId
      })
    },
    openScoreDetail(item) {
      window.SCORETYPE = this.hasDone;
      this.$router.push({ name: 'mproject-score', params: {detail: item}})
    }
  }
}
</script>

<style lang="scss" scoped>
  .list-wrapper{
    min-height: 100vh;
    background: #F6F6F6;
    padding: 12px;
    padding-bottom: 50px;
    .list-type{
      margin-bottom: 10px;
      text-align: center;
    }
    .item-wrapper{
      .item{
        padding: 12px;
        box-shadow: 0 1px 3px rgb(221, 221, 221);
        background: #FFF;
        border-radius: 2px;
        margin-bottom: 10px;
        .row-1{
          font-weight: bold;
        }
        .row-2{
          margin-top: 5px;
        }
        .row-3{
          margin-top: 5px;
        }
      }
      .footer{
        margin-top: 10px;
        clear:both;
        text-align: center;
        color: #BCBCBC;
        font-size: 12px;
      }
    }
  }
</style>